import React from 'react';
import Graphin from '@antv/graphin';
import { ContextMenu } from '../context-menu';
// import { Select } from 'antd';
import '@antv/graphin/dist/index.css'; // 引入Graphin CSS
import '@antv/graphin-components/dist/index.css';
import { message,Menu } from 'antd';

// import './styles.css';
// import { Button } from 'antd';


interface IState {
    // data:{
    //     /** 节点 */
    //     nodes: any;
    //     /** 边 */
    //     edges: any;
    // },
	layout:any,
}

interface IProps {
	changeGraphinData:any
	nodeData:any
	drowData:any
	delNodeFun:any
	handleTools:any
	setOutDataFunc:any
	Vis:any
	delNode:any
	modelStatus:any
	updatePosition:any
	editNode:any
	updateNodes:any
	clearUpdateNodes:any
	graphRef:any
}

interface Layout {
	name: string;
	options: {
		[key: string]: any;
	};
}

interface ILayoutSelectorProps {
	/** 所有的内置布局**/
	layouts?: Layout[];
	/** 当前的布局 **/
	value?:any;
	/** 切换布局的事件 **/
	onChange?: ( vale: Layout ) => void;
	apis?: any
}




const GraphinComponent = ( props:IProps ) => {

	// const { data, selected } = state;
	// const [ layout, setLyout ] = useState( { name: 'force', options: {} } );
	const [ st,setSt ] = React.useState( false );
	
	const graphRef = props.graphRef;
	React.useEffect( () => {
		const { graph } = graphRef.current;

		if( st ) {
			graph.removeBehaviors( 'drag-node' );
		}

		const onNodeDblClick = ( e ) => {
			let data = e.item._cfg.model.data;
			//打开数据预览，状态升级传递数据
			props.drowData( 'show', data );
		};
		
		const onNodeClick = e => {
			let data = e.item._cfg.model.data;
			data['x'] = e.item._cfg.model.x;
			data['y'] = e.item._cfg.model.y;
			props.setOutDataFunc( data );
		};

		const onNodeDragend = ( e ) => {
			if( props.modelStatus === 'STOPPED' ) {
				let id = e.item._cfg.id;
				// 节点移动结束后触发
				//当拖拽完成后触发的事件，
				// 此事件作用在被拖曳元素上
				props.updatePosition( id,e.x,e.y );
			}
		};

		const hideDrower = ( e ) => {
			props.drowData( 'hide' );

		};

		if ( props.updateNodes.length ) {
			props.updateNodes.map( node => {
				const item = graph.findById( node.id );
				if ( item ) {
					graph.updateItem( item, node );
				}
				return node;
			} );
			props.clearUpdateNodes();
		}
		
		//监听单击事件
		graph.on( 'node:click',onNodeClick );
		//监听一动结束事件
		graph.on( 'node:dragend', onNodeDragend );
		//监听双击事件
		graph.on( 'node:dblclick', onNodeDblClick );
		//监听右键
		graph.on( 'node:contextmenu', hideDrower );
		return () => {
			graph.off( 'node:dblclick', onNodeDblClick );
			graph.off( 'node:dragend', onNodeDragend );
			graph.off( 'node:contextmenu', hideDrower );
			graph.off( 'node:click',onNodeClick );
		};
	}, [ graphRef, props, st ] );


	React.useEffect( () => {

		setSt( props.modelStatus !== 'STOPPED' );

	}, [ props.modelStatus ] );
	


	const hideDrower = () => {
		props.drowData( 'hide' );
	};

	//右键菜单事件, 返回 false 阻止右键菜单出现
	const onContextmenu = ( e, graph ) => {
		let nodes = graph.findAllByState( 'node', 'selected' );
		if ( nodes.length ) {
			let data = nodes[0]._cfg.model.data;
			if ( data.effect === 'DISABLE' ) {
				return false;
			}
		}
		return true;
	};

	const options = [
		// {
		// 	key: 'relation',
		// 	title: '关联',
		// 	visible: true,
		// 	onClick: ( e ) => {
		// 		const nodes = e.graph.findAllByState( 'node', 'selected' );
		// 		// const nodeIds = nodes.map( ( node ) => node.get( 'id' ) );
		// 		if ( nodes.length === 0 ) {
		// 			message.info( 'oh,你好像没有选中节点...' );
		// 		} else {
		// 			// props.handleTools( { ttype: 'relationTools' } );
		// 			let n= nodes[0];
		// 			let data = n._cfg.model.data;
		// 			data['x'] = n._cfg.model.x;
		// 			data['y'] = n._cfg.model.y;
		// 			props.setOutDataFunc( data );
		// 			props.Vis( 'relationVisible',true );
		// 		}
		// 	}
		// },
		// {
		// 	key: 'arrangement',
		// 	title: '整理',
		// 	visible: true,
		// 	onClick: ( e ) => {
		// 		const nodes = e.graph.findAllByState( 'node', 'selected' );
		// 		// const nodeIds = nodes.map( ( node ) => node.get( 'id' ) );
		// 		if ( nodes.length === 0 ) {
		// 			message.info( 'oh,你好像没有选中节点...' );
		// 		} else {
		// 			let n= nodes[0];
		// 			let data = n._cfg.model.data;
		// 			data['x'] = n._cfg.model.x;
		// 			data['y'] = n._cfg.model.y;
		// 			props.setOutDataFunc( data );
		// 			props.handleTools( { ttype: 'orderTools' } );
		// 		}
		// 	}
		// },
		// {
		// 	key: 'polymerization',
		// 	title: '聚合',
		// 	visible: true,
		// 	onClick: ( e ) => {
		// 		const nodes = e.graph.findAllByState( 'node', 'selected' );
		// 		// const nodeIds = nodes.map( ( node ) => node.get( 'id' ) );
		// 		if ( nodes.length === 0 ) {
		// 			message.info( 'oh,你好像没有选中节点...' );
		// 		} else {
		// 			let n= nodes[0];
		// 			let data = n._cfg.model.data;
		// 			data['x'] = n._cfg.model.x;
		// 			data['y'] = n._cfg.model.y;
		// 			props.setOutDataFunc( data );
		// 			props.Vis( 'aggVisible',true );
		// 			// props.handleTools( { ttype: 'aggregationTools' } );
		// 		}
		// 	}
		// },
		{
			key: 'output',
			title: '输出',
			visible: true,
			onClick: ( e ) => {
				const nodes = e.graph.findAllByState( 'node', 'selected' );
				// const nodeIds = nodes.map( ( node ) => node.get( 'id' ) );
				if ( nodes.length === 0 ) {
					message.info( 'oh,你好像没有选中节点...' );
				} else {
					let n= nodes[0];
					let data = n._cfg.model.data;
					data['x'] = n._cfg.model.x;
					data['y'] = n._cfg.model.y;
					props.setOutDataFunc( data );
					// props.handleTools( { ttype: 'outTools' } );
					props.Vis( 'dataOutVisible',true );
				}
			}
		},
		{
			key: 'edit',
			title: '编辑',
			visible: true,
			onClick: ( e ) => {
				const nodes = e.graph.findAllByState( 'node', 'selected' );
				// // const nodeIds = nodes.map( ( node ) => node.get( 'id' ) );
				if ( nodes.length === 0 ) {
					message.info( 'oh,你好像没有选中节点...' );
				} else {
					let n= nodes[0];
					let data = n._cfg.model.data;
					props.setOutDataFunc( { ...data,edit: true } );
					props.editNode( data );
				}
			}
		},
		{
			key: 'rename',
			title: '重命名',
			visible: true,
			onClick: ( e ) => {
				const nodes = e.graph.findAllByState( 'node', 'selected' );
				// // const nodeIds = nodes.map( ( node ) => node.get( 'id' ) );
				if ( nodes.length === 0 ) {
					message.info( 'oh,你好像没有选中节点...' );
				} else {
					let n= nodes[0];
					let data = n._cfg.model.data;
					props.setOutDataFunc( { ...data } );
					props.Vis( 'renameComponentVisible',true );
				}
			}
		},
		{
			key: 'del',
			title: '删除',
			visible: true,
			onClick: ( e ) => {
				const nodes = e.graph.findAllByState( 'node', 'selected' );
				// const nodeIds = nodes.map( ( node ) => node.get( 'id' ) );
				if ( nodes.length === 0 ) {
					message.info( 'oh,你好像没有选中节点...' );
				} else {
					let n= nodes[0];
					let data = n._cfg.model.data;
					props.delNode( data );
				}
			}
		}
	];
	

	return (
		<div style={{ height: 'calc(100% - 63px)' }} onClick={ hideDrower }>
			<Graphin data={props.nodeData}
					 ref={props.graphRef}
					 // options={{ disableDrag: st }}
					 style={{ position: 'relative' }}>
				<ContextMenu
					onContextmenu={onContextmenu}
					render={( propsNode:any ) => {
						let nodes = propsNode.graph.findAllByState( 'node', 'selected' );
						if ( nodes.length > 0 ) {
							let data = nodes[0]._cfg.model.data;
							//最后显示的菜单
							//默认不做处理的菜单
							let canSelect = options;
							//可根据不同功能的node定制不同的菜单栏
							// @ts-ignore
							if ( data.nodeType === 'output' ) {
								canSelect = options.filter( it => it.key === 'del' || it.key === 'edit' );
							}
							//当为runnig时右击无菜单
							if( props.modelStatus !== 'STOPPED' ) {
								return ;
							}

							// @ts-ignore
							if ( data.effect === 'DISABLE' ) {
								return ;
							}
							return(
								<div className="graphin-context-menu">
									<Menu>
										{
											canSelect.map( item => {
												return ( <Menu.Item  key={item.key}
													// className={styles.ant-menu-item}
													onClick={() => {
														item.onClick( propsNode );
														propsNode.onClose();
													}}>
													{item.title}
												</Menu.Item> );
											} )
										}
									</Menu>
								</div>
							);
						}
					}}
				/>
			</Graphin>
		</div>
	);
};

export default GraphinComponent;